<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"></style>
</head>
<body>
    <h1>地址联动  onchange </h1>
    <hr>

    请选择您的地址:
    <select id="con"></select>
    <select id="city"></select>


    <script>
        // 声明数组
        // 国家的信息
        var conList = ['中国', '美国', '英国', '日本', '德国'];
        // 城市的信息 二维数组
        var cityList = new Array();
        cityList[0] = ['北京', '上海', '天津', '重庆', '南京'];
        cityList[1] = ['纽约', '洛杉矶', '芝加哥', '旧金山', '华盛顿'];
        cityList[2] = ['伦敦', '伯明翰', '曼彻斯特', '剑桥', '爱丁堡'];
        cityList[3] = ['东京', '北海道', '福冈县', '广岛', '大阪'];
        cityList[4] = ['柏林', '汉堡', '慕尼黑', '科隆', '法兰克福'];


        // 各种获取
        var con = document.getElementById('con');
        var city = document.getElementById('city');

        // 填充第一个select框体
        for (var i = 0; i < conList.length; i++) {
            // con.innerHTML += '<option value="i">conList[i]</option>';
            // 参1:填写内容   参2:填写value值
            con.add(new Option(conList[i], i));
        }


        // 绑定事件 onchange
        con.onchange = function() {
            // city.innerHTML = '';
            city.options.length = 0;

            var index = con.value;
            // console.log(index);
            // 根据索引 取出城市信息
            var citys = cityList[index];
            // console.log(citys);
            
            // 填充第二个select框体
            for (var i = 0; i < citys.length; i++) {
                // 参1:填写内容   参2:填写value值
                city.add(new Option(citys[i], i));
            }
        }
        // 手动
        con.onchange();
    
    </script>
</body>
</html>